<!-- 科室预约 -->
<template>
  <div class="main-content-container">
    <div ref="search" style="padding-bottom: 10px">
      <el-row type="flex" justify="space-between" class="mt10">
        <!-- <el-col>
        <el-form ref="searchFormRef" :model="searchForm" label-width="80px" :inline="true">
          <el-form-item>
            <el-input v-model="searchForm.customerName" placeholder="姓名、手机号、编号" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchBtn">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col> -->
        <el-col :span="14" class="searchs-y">
          <el-form ref="searchs" label-width="80px" :inline="true">
            <el-form-item>
              <el-input v-model="searchForm.customerName" placeholder="姓名、手机号、编号" clearable @change="handleChange">
                <el-button slot="append" icon="el-icon-search" @click="handleChange" />
              </el-input>
              <el-form-item v-if="false" class="spn buttons clear-button">
                <el-button type="primary" @click="eliminate">清除</el-button>
              </el-form-item>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2" class="spn buttons" style="text-align:right;display:block">
          <el-button @click="addSubscribeBtn">+ 增加预约</el-button>
        </el-col>
      </el-row>
      <el-row class="mt10" type="flex">
        <Search :data="selections" :attribute="'appointmentDate'" @dateChange="handleDateChange" @change="handleTypeChange" />
        <DictionarySelector class="dictSelector el-select-y" placeholder="请选择项目类型" :value.sync="searchForm.projectType" code="swan_department_xmlx" @change="handleChange" />
        <DictionarySelector class="dictSelector el-select-y" placeholder="请选择预约来源" :value.sync="searchForm.appointmentSource" code="swan_department_yyly" @change="handleChange" />
      </el-row>
      <el-row class="mt10">
        <Tabs v-model="searchForm.appointmentStatus" :data="filtrateList" @change="handleConditionChange" />
      </el-row>
    </div>
    <!-- 表单区域 -->
    <div class="box-show">
      <el-table v-loading="loading" :data="appointmentList" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column label="顾客" prop="customerName" :show-overflow-tooltip="true" />
        <el-table-column label="性别" prop="customerSex" :show-overflow-tooltip="true" />
        <el-table-column label="项目单号" prop="projectNo" :show-overflow-tooltip="true" />
        <el-table-column label="项目类型" prop="projectType" :show-overflow-tooltip="true" />
        <el-table-column label="名称" prop="projectName" :show-overflow-tooltip="true" />
        <el-table-column label="预约时间" :show-overflow-tooltip="true" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.appointmentDate }}</span>&nbsp;
            <span>{{ scope.row.appointmentTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="接待人" prop="receiverName" :show-overflow-tooltip="true" />
        <el-table-column label="预约来源" prop="appointmentSource" :show-overflow-tooltip="true" />
        <el-table-column label="状态" prop="appointmentStatus" :show-overflow-tooltip="true" />
        <el-table-column v-if="searchForm.appointmentStatus === '预约中'" label="剩余时间" prop="remainingTime" :show-overflow-tooltip="true" />
        <el-table-column v-else label="到店时间" prop="arrivalTime" :show-overflow-tooltip="true" />
        <el-table-column label="操作" min-width="120">
          <template slot-scope="scope">
            <!-- <el-button type="text" @click="signInBtn(scope.row)">签到</el-button>
          <el-button type="text" @click="cancelBtn(scope.row)">取消预约</el-button> -->
            <el-button type="text" @click="lookBtn(scope.row)">查看</el-button>
            <el-button v-if="scope.row.appointmentStatus === '预约中'" type="text" @click="signInBtn(scope.row)">签到</el-button>
            <el-button v-if="scope.row.appointmentStatus === '预约中'" type="text" @click="cancelBtn(scope.row)">取消预约</el-button>
            <el-button v-if="scope.row.appointmentStatus === '已过期' || scope.row.appointmentStatus === '已取消'" type="text" @click="addSubscribeBtn(scope.row)">重新预约</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <!-- 添加预约 -->
    <Dialog ref="addSubscribeRef" :visible.sync="visible" :title="title" :text-btn="textBtn" :flag.sync="flag" @success="getChargeList" @addTriage="addTriageBtn" />
    <!-- 添加分诊 -->
    <Add-triage ref="addTriageRef" :visible.sync="show" :title="title" />
  </div>
</template>
<script>
import { DictionarySelector } from "@rabbit.do/rabbit";
import Search from "@/components/Search";
import { backUp } from "@/config";
import Dialog from "./dialog";
import AddTriage from "../triage/dialog";
import { tableColor } from '@/utils/common.js';
import Tabs from "@/components/SearchSelection";
export default {
  components: {
    DictionarySelector,
    Search,
    Dialog,
    AddTriage,
    Tabs,
  },
  data() {
    return {
      selections: backUp,
      tableColor,
      innerHeight: null,
      filtrateList: [
        {
          name: '全部',
          id: '全部',
        },
        {
          name: '预约中',
          id: '预约中',
        },
        {
          name: '已到达',
          id: '已到达',
        },
        {
          name: '已过期',
          id: '已过期',
        },
        {
          name: '已取消',
          id: '已取消',
        },
      ],
      searchForm: {
        appointmentStatus: '预约中',
      },
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      appointmentList: [],
      title: "",
      visible: false,
      textBtn: "",
      loading: false,
      flag: false,
      show: false,
    };
  },
  mounted() {
    this.getChargeList();
    this.timer = setInterval(() => {
      this.getChargeList();
    }, 1000 * 60);
    var topHeight = (this.$refs.search.clientHeight + 160 + 80);
    var winHeight = document.body.clientHeight || document.documentElement.clientHeight;
    this.innerHeight = winHeight - topHeight;
    console.log(this.innerHeight);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    async getChargeList() {
      if (!this.searchForm.appointmentDate) {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const beginTime = year + "-" + month + "-" + day + " 00:00:00";
        const endTime = year + "-" + month + "-" + day + " 23:59:59";
        this.searchForm.timeType = "today";
        this.searchForm.appointmentDate = beginTime + "_" + endTime;
      }
      this.searchForm.deptId = this.$store.getters.currentUserInfo.deptUsrList[0].deptId;
      if (!this.searchForm.deptId) {
        this.searchForm.deptId = 0;
      }
      this.loading = true;
      const searchForm = JSON.parse(JSON.stringify(this.searchForm));
      if (searchForm.appointmentStatus === "全部") searchForm.appointmentStatus = undefined;
      const res = await this.$api['reception/subscribe/appointmentlist']({ ...this.params, query: searchForm });
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查询预约列表失败');
      this.appointmentList = res.data.result;
      this.total = res.data.total;
    },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getChargeList();
    },
    // 搜索
    searchBtn() {
      this.getChargeList();
    },
    // 添加预约
    addSubscribeBtn(row) {
      this.title = "添加预约";
      this.textBtn = '提交';
      this.visible = true;
      this.flag = false;
      this.$refs.addSubscribeRef.addSubscribe(row, this.searchForm);
    },
    addTriageBtn(row) {
      this.show = true;
      this.$nextTick(() => {
        this.title = "添加分诊";
        this.$refs.addTriageRef.addTriage(row);
      });
    },
    // 查看
    lookBtn(row) {
      this.title = "查看预约";
      this.textBtn = "确认";
      this.flag = true;
      this.visible = true;
      this.$refs.addSubscribeRef.lookBtn(row, this.searchForm);
    },
    // 签到
    async signInBtn(row) {
      this.title = "预约签到";
      this.textBtn = "签到并分诊";
      this.flag = true;
      this.visible = true;
      this.$refs.addSubscribeRef.signInBtn(row, this.searchForm);
    },
    // 取消预约
    cancelBtn(row) {
      this.title = "取消预约";
      this.textBtn = "提交";
      this.flag = true;
      this.visible = true;
      this.$refs.addSubscribeRef.cancelBtn(row, this.searchForm);
    },
    // 顶部时间筛选
    handleDateChange(val) {
      this.searchForm.appointmentDate = val.createdTime;
      Object.assign(this.searchForm, val);
      this.getChargeList();
    },
    handleTypeChange(val) {
      this.searchForm.appointmentDate = val.createdTime;
      Object.assign(this.searchForm, val);
      this.getChargeList();
    },
    handleChange() {
      this.getChargeList();
    },
    handleConditionChange(val) {
      this.searchForm.appointmentStatus = val;
      this.getChargeList();
    },
  },
};
</script>
<style lang="scss" scoped>

</style>

